let updateInfo = {
	bookData: [
		{
			dataName: "诗人的迟缓",
			dataImage: "../public/book1.jpg",
			dataProcess: "30%"
		},
		{
			dataName: "我不喜欢人类我想住进森林",
			dataImage: "../public/book2.jpg",
			dataProcess: "50%"
		},
		{
			dataName: "树叶裙",
			dataImage: "../public/book3.jpg",
			dataProcess: "10%"
		}
	],
	addBook: function(){
		// let arrBookCard = document.getElementsByTagName("book-card")
		// 获取book-card中含有data-bookid的元素
		let arrBookCard = document.querySelectorAll("book-card[data-bookid]")
		for(let x=0; x<arrBookCard.length; x++){
			let item = arrBookCard[x]
			let num =  item.dataset.bookid.slice(1);
			if(num>this.bookData.length) {
				console.log("数据不足，请增添数据") 
				num = 0
			}else{
				num = num - 1
			}
			item.dataset.name = this.bookData[num].dataName
			item.dataset.image = this.bookData[num].dataImage
			item.dataset.process = this.bookData[num].dataProcess
		}
	}
}
updateInfo.addBook()
class BookCard extends HTMLElement {
	constructor() {
	    // 先调用super方法
			super()
			
			// 创建一个shadow root
			let shadow = this.attachShadow({
				mode: 'open'
			})
			// 判断浏览器是否支持模板
			function supportsTemplate() {
			  return 'content' in document.createElement('template');
			}
			if (!supportsTemplate()) {
			  console.warn("该浏览器不支持模板元素，请更换浏览器")
			}
			let temp = document.getElementById('bookCardTemplate')
			// content.cloneNode固定写法
			let tempCont = temp.content.cloneNode(true)
			tempCont.querySelector('.book-name').innerText = this.getAttribute('data-name')
			tempCont.querySelector('#processValue').style.width = this.getAttribute('data-process')
			tempCont.querySelector('.process-text').innerText = this.getAttribute('data-process')
			tempCont.querySelector('.book-image').setAttribute('src', this.getAttribute('data-image'))
			updateInfo.addBook()
			
			shadow.appendChild(tempCont)
	}
}

if(!window.customElements){
	// Microsoft Edge
	console.warn("该浏览器不支持自定义组件，请更换浏览器")
}else{
	customElements.define('book-card', BookCard)
}
